<template>
  <div id="app">新闻列表管理</div>
  <div class="head">
    <input type="text" placeholder="请输入标题" v-model="title">
    <input type="text" placeholder="请输入内容" v-model="content">
    <button @click="add" style="background-color: aquamarine;border: 1px solid #fff; color: blue;">添加</button>
  </div>
  <div class="btn">
    <button class="prev" @click="goPrev">上一页</button>
    当前页面:<input type="text" :placeholder="pageIndex" class="smallIpt">
    <button class="next" @click="goNext">下一页</button>
    
    前往页面:<input type="text" v-model="pageIndex" class="smallIpt"><button @click="toto">确定</button>
  </div>
  <table class="main">
    <tr>
      <th>图片</th><th>标题</th><th>内容</th><th>时间</th><th>操作</th>
    </tr>
    <tr v-for="item in newsList" :key="item.id">
      <td><img :src="item.image_url" alt=""></td><td>{{item.title}}</td><td>{{item.content}}</td><td>{{item.add_time}}</td><td><button @click="remove(item.id)">删除</button></td>
    </tr>
    
  </table>
  
  
</template>
<script>
import axios from 'axios'

export default {
  data () {
    return {
      newsList: [],
      title: '',
      content:'',
      pageIndex:1 
     }
  },
  created () {
    this.getNewlist()     
  //   axios.post('/api/post/news').then(res=>console.log(res))
  },
  methods: {
    // 获取列表数据
    getNewlist () {
      axios.get('/api/get/news', {
       params: {
         pageIndex: this.pageIndex,
         pageSize: 10
        
      }
     }).then(res => {
       this.newsList = res.data.list
     })
      
    },
    // 添加数据
    add () {
      if (this.title.trim() === '' || this.content.trim() === '') 
      return alert('请填写新闻标题或新闻内容') 
      axios.post('/api/add/news', {
        title: this.title,
        content: this.content
      }
      ).then(res => { console.log(res); })

      this.title = '',
      this.content =''
    },
    // 上一页
    goPrev () {
      if (this.pageIndex > 1) {
        this.pageIndex--
        this.getNewlist()
      }
      
    },
    // 下一页
    goNext () {
      this.pageIndex++
      this.getNewlist()
    },
    toto () {
      this.getNewlist()
    }
    ,
    // 删除
    remove (id) {
      console.log(id);
      axios.post('/api/del/news', {
        id
      }
      ).then(res => { console.log(res); })
       this.getNewlist()
    }
 }

  
 
}
</script>

<style>


tr>td{
  font-size: 16px;


}
.smallIpt{
  width: 30px; 
  text-align: center;
}
</style>